<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="inputId" clearable placeholder="修改订单号并输入后回车进行查询"
                  @change="getRepairInfoByID">
        </el-input>
      </el-col>
      <el-col :span="6">
        <div>
          <el-date-picker
            v-model="inputTime"
            @change="getRepairInfoByTime"
            type="date"
            placeholder="选择日期"
            >
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="fuzzySearch"
          placeholder="模糊搜索问题描述"
          @change="getRepairInfoFuzzySearch"
        >
          <el-select style="width: 140px" v-model="selectedValue" slot="prepend" placeholder="输入报修类型">
            <el-option v-for="selectItem in selectItems"
                       :key="selectItem"
                       :label="selectItem"
                       :value="selectItem"></el-option>
          </el-select>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary"
                   plain
                   round
                   @click="getRepairInfoFuzzySearch"
        >{{ bottoninfo }}</el-button>
        <el-button type="primary"
                   plain
                   round
                   @click="clear"
        >清空</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      max-height="30%"
    >
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="报修单号">
              <span>{{ props.row.ra_id }}</span>
            </el-form-item>
            <br>
            <el-form-item label="报修人名字">
              <span>{{ props.row.ra_user_name }}</span>
            </el-form-item>
            <br>
            <el-form-item label="问题类型">
              <span>{{ props.row.ra_type }}</span>
            </el-form-item>
            <br>
            <el-form-item label="问题描述">
              <span>{{ props.row.ra_desc }}</span>
            </el-form-item>
            <br>
            <el-form-item label="详细地址">
              <span>{{ props.row.ra_detail_address }}</span>
            </el-form-item>
            <br>
            <el-form-item label="照片、视频地址">
              <img :src="props.row.ra_media_url" style="width: 150px;height: auto"/>
            </el-form-item>
            <br>
            <el-form-item label="联系方式">
              <span>{{ props.row.ra_contact }}</span>
            </el-form-item>
            <br>
            <el-form-item label="上门时间">
              <span>{{ props.row.ra_repair_time }}</span>
            </el-form-item>
            <br>
            <el-form-item label="报修时间">
              <span>{{ props.row.ra_apply_time.split('T')[0] }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="ra_id"
        label="报修单号"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="ra_user_name"
        label="报修人姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_type"
        label="问题类型"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_contact"
        label="联系方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ra_detail_address"
        label="详细地址"
        width="150">
      </el-table-column>
      <el-table-column
        prop="ra_apply_time"
        label="报修时间"
        width="300">
      </el-table-column>
      <el-table-column
        prop="ra_state"
        label="订单状态"
        width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" effect="dark"
                    :type="scope.row.ra_state===1?'success':(scope.row.ra_state==0?'':'danger')"
            >
              {{ scope.row.ra_state===1?'已派单':(scope.row.ra_state===0?'未处理':'被退回') }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.ra_state!==1">
            <el-button @click="showDialog(scope.row.ra_id)" type="text" size="small">派单</el-button>
            <el-button
              :disabled="scope.row.ra_state===-1?true:false"
              type="text"
              size="small"
              @click="dispatchReturn(scope.row.ra_id,scope)"
            >退回</el-button>
          </div>
          <div v-if="scope.row.ra_state===1">
            <el-button
              type="text"
              size="small"
              @click="ShowSearchRepairApply(scope.row.ra_id)">查询</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="报修单管理"
               :visible.sync="dialogTableVisible"
               :before-close="handleClose"
               center="center"
               width="400px"
    >
      <el-form  style="width: 800px" :label-position="form.labelPosition" ref="form" :model="form" label-width="100px">
        <el-form-item label="村庄名称">
          <el-select
            v-model="v_id"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词搜索村庄名称"
            :remote-method="getVillageName"
            :loading="loading">
            <el-option
              v-for="item in villageNames"
              :key="item.v_id"
              :label="item.v_name"
              :value="item.v_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-select
            v-model="d_id"
            filterable
            reserve-keyword
            placeholder="请选择对应部门"
            :loading="loading">
            <el-option
              v-for="department in departments"
              :key="department.d_id"
              :label="department.d_name"
              :value="department.d_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作人员名称">
          <el-select
            v-model="dm_id"
            filterable
            reserve-keyword
            placeholder="请选择对应部门负责成员"
            :loading="loading">
            <el-option
              v-for="departmentMember in departmentMembers"
              :key="departmentMember.rt_user_id"
              :label="departmentMember.rt_name"
              :value="departmentMember.rt_user_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onsubmit">立即创建</el-button>
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <SearchRepairApply
      ref="childSearchRepairApply"
      :get-ra-id="InputIdSearchRepairApply"
      :is-show="isSearchRepairApplyShow"
    ></SearchRepairApply>
  </div>
</template>

<script>
import SearchRepairApply from './SearchRepairApply'
export default {
  name: 'RepairRequestTables',
  data () {
    return {
      InputIdSearchRepairApply: '',
      isSearchRepairApplyShow: false,
      form: {
        labelPosition: 'right'
      },
      departmentMembers: [],
      departments: [],
      villageNames: [],
      d_id: '',
      v_id: '',
      dm_id: '',
      loading: false,
      states: [],
      dialogTableVisible: false,
      selectItems: [
        '服务器获取失败'
      ],
      showItems: [],
      tableData: [],
      bottoninfo: '查询所有',
      inputId: '',
      inputTime: '',
      selectedValue: '',
      fuzzySearch: '',
      choosedRaId: ''
    }
  },
  methods: {
    setSearchRepairApplyVisible (flag) {
      this.isSearchRepairApplyShow = flag
    },
    ShowSearchRepairApply (raId) {
      // this.$message('打开派单信息面板')
      this.$refs.childSearchRepairApply.showMe()
      this.$refs.childSearchRepairApply.changeRaId(raId)
    },
    showDialog (raId) {
      // this.$message('管理报修单')
      this.dialogTableVisible = true
      this.choosedRaId = raId
    },
    onsubmit () { // 提交派单表单
      if (this.dm_id === '') {
        this.$message.error('部门成员不能为空')
        return
      }
      this.$axios.post('/insertNewRepairDispatch', {
        dr_ra_id: this.choosedRaId,
        dr_user_id: this.dm_id
      }, {emulateJSON: true}
      ).then(successResponse => {
        this.dialogTableVisible = false
        for (var index in this.tableData) {
          if (this.tableData[index].ra_id === this.choosedRaId) {
            this.tableData[index].ra_state = 1
            break
          }
        }
        this.choosedRaId = ''
      }).catch(failResponse => {
        this.$message.error('加载失败' + failResponse)
      })
    },
    getDepartment (query) {
      if (query !== '') {
        this.loading = true
      } else {
        this.departments = []
      }
    },
    getVillageName (query) {
      if (query !== '') {
        this.loading = true
        this.$axios.post('/getVillageInfoFuzzySearch', {
          v_name: query
        }).then(successResponse => {
          this.loading = false
          this.villageNames = successResponse.data
        }).catch(failResponse => {
          this.$message.error('服务器信息拉取失败')
          this.loading = false
        })
      } else {
        this.villageNames = []
      }
    },
    dispatchReturn (raId, scope) {
      var uId = this.$store.state.user.u_id
      if (uId === '') {
        this.$message.error('你的登录信息错误')
        return
      }
      this.$axios.post('/dispatchReturn', {
        u_id: uId,
        ra_id: raId
      }).then(successResponse => {
        if (successResponse.data === '成功更新') {
          scope.row.ra_state = -1
          this.$message.success(successResponse.data)
        } else {
          this.$message.error(successResponse.data)
        }
      }).catch(failResponse => {
        this.$message.error('更新失败')
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick (row) {
      alert(row)
    },
    changeShowItems (items) {
      this.showItems = items
    },
    clear () {
      this.inputId = ''
      this.inputTime = ''
      this.selectedValue = ''
      this.fuzzySearch = ''
    },
    getAllRepairInfo () {
      this.$axios
        .post('/searchAllRepairInfo', {})
        .then(successResponse => {
          this.tableData = successResponse.data
        }).catch(failResponse => {
          console.log('failed to get ')
        })
    },
    getRepairInfoByID () {
      this.$axios
        .post('/searchById', {
          'id': this.inputId
        })
        .then(successResponse => {
          if (JSON.stringify(successResponse.data) === '[null]') {
            this.$message.error('查询失败')
            return
          }
          this.tableData = successResponse.data
        }).catch(failResponse => {
          console.log('failed to get ')
        })
    },
    getRepairInfoByTime (val) {
      // this.$forceUpdate()
    },
    getRepairInfoFuzzySearch () {
      this.$axios
        .post('/getRepairInfoFuzzySearch', {
          date: this.inputTime,
          type: this.selectedValue,
          fuzzySearch: this.fuzzySearch
        })
        .then(successResponse => {
          if (JSON.stringify(successResponse.data) === '[]') {
            this.$message.error('未查到数据')
          }
          this.tableData = successResponse.data
        }).catch(failResponse => {
          this.$message.error('查询失败')
        })
    }
  },
  components: {
    SearchRepairApply
  },
  watch: {
    v_id: function (newId, oldId) {
      this.d_id = ''
      this.departments = []
      this.departmentMembers = []
      if (newId === '') {
        return
      }
      this.$message('部门信息拉取中')
      this.$axios.post('/getDepartmentInfoById', {
        d_village_id: newId
      }).then(successResponse => {
        if (JSON.stringify(successResponse.data) === '[]') {
          this.$message.error('部门信息为空')
          return
        }
        this.departments = successResponse.data
        this.$message.success('部门信息拉取成功')
      }).catch(failResponse => {
        this.$message.error('服务器部门信息拉取失败')
      })
    },
    d_id: function (newId, oldId) {
      this.dm_id = ''
      this.departmentMembers = []
      if (newId === '') {
        return
      }
      this.$axios.post('/getRepairTeamInfoByDepartmentId', {
        dm_department_id: newId
      }).then(successResponse => {
        if (JSON.stringify(successResponse.data) === '[]') {
          this.$message.error('部门成员信息为空')
          return
        }
        this.$message.success('部门成员信息拉取成功')
        this.departmentMembers = successResponse.data
      }).catch(failResponse => {
        this.$message.error('服务器部门成员信息拉取失败')
      })
    },
    inputTime: function (newInput, oldInput) {

    },
    selectItem: function (newInput, oldInput) {
      if (newInput !== '') {
        this.bottoninfo = '查询'
      }
    },
    fuzzySearch: function (newInput, oldInput) {
      if (newInput !== '') {
        this.bottoninfo = '查询'
      }
    },
    selectedValue: function (newInput, oldInput) {
      if (newInput !== '') {
        this.bottoninfo = '查询'
      }
    }
  },
  created () {
    this.$axios
      .post('/getAllRepairType', {})
      .then(successResponse => {
        this.selectItems = successResponse.data
      }).catch(failResponse => {
        this.$message.error('服务器报修类型拉取失败')
      })
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` }
    })
  }
}
</script>

<style scoped>
.stepss:hover{
  cursor: pointer;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
